<template>
  <view class="page">
    <view class="address-box">
      <u-swipe-action>
        <u-swipe-action-item
          :options="options1"
          v-for="(i, k) in dataList"
          :index="k"
          :ref="'swipe' + k"
          :name="i.name"
          :show="i.show"
          :key="k"
          @click="() => openDelModel(i)"
        >
          <view class="address-item" @click="chooseAddress(i)">
            <u-avatar :text="i.avatar" font-size="18" random-bg-color />
            <view class="info">
              <view class="info-row">
                <text> {{ i.name || "-" }}</text>
                <text>{{ i.mobile || "-" }}</text>
                <view class="tag" v-if="i.default == '1'">默认</view>
              </view>
              <u-text
                :text="i.formatted_address + i.address"
                block
                color="#979797"
                size="14"
                line-height="22"
              />
            </view>
            <view @click="handleTo('edit', i)">
              <u-icon name="edit-pen" color="#979797" />
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <u-loadmore v-if="dataList.length" :status="status" />
    <u-empty
      v-if="dataList.length == 0"
      :icon="webSrc('/assets/web_img/empty.png')"
      width="162"
      height="162"
      text="暂无收货地址"
      textColor="#bababa"
    />
    <view class="btn">
      <view class="button" @click="handleTo('add')"> 新增收货地址</view>
    </view>
    <u-modal
      :show="delShow"
      title="删除提示"
      content="确认删除收货地址吗？"
      close-on-click-overlay
      show-cancel-button
      @close="closeDel"
      @cancel="closeDel"
      @confirm="handleDel"
    />
  </view>
</template>

<script>
import { myAddressList, myDelAddress } from "@/request/myApi.js";
export default {
  data() {
    return {
      dataList: [], // 地址列表
      status: "loadmore",
      total: 0, // 总数
      page: 1, // 页数
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#ff4f00",
          },
        },
      ],
      delShow: false, // 删除提示
    };
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 跳转编辑
    handleTo(type, data) {
      uni.navigateTo({
        url: `/pages/my/addressEdit?type=${type}&data=${JSON.stringify(data)}`,
      });
    },
    // 选择地址
    chooseAddress(i) {
      let route = this.$prePage().$scope.route;
      if (route == "pages/mall/goodsOrder") {
        this.$prePage().getData(i.id);
        uni.navigateBack({ delta: 1 });
      }
    },
    // 打开删除提示弹窗
    openDelModel(val) {
      this.delShow = true;
      this.delRow = val;
    },
    // 关闭删除提示弹窗
    closeDel() {
      this.delShow = false;
      this.delRow = {};
    },
    // 删除地址
    handleDel() {
      let index = this.dataList.findIndex((i) => i.id == this.delRow.id);
      this.$refs["swipe" + index][0].closeHandler(); // 关闭滑动按钮
      myDelAddress({ id: this.delRow.id }).then((res) => {
        if (res.code == 1) {
          this.dataList = this.dataList.filter((i) => i.id != this.delRow.id);
          setTimeout(() => {
            uni.showToast({
              title: "删除成功",
              icon: "none",
            });
          }, 0);
          this.closeDel();
        }
      });
    },
    // 编辑后调用刷新页面
    refreshList() {
      this.page = 1;
      uni.pageScrollTo({ scrollTop: 0 });
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      myAddressList({
        page: this.page,
      })
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.data;
            list.forEach((i) => {
              i.avatar = i.name.substr(0, 1);
              i.show = false;
            });
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total >= this.dataList.length ? "nomore" : "loadmore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  padding: 20rpx;
  min-height: calc(100vh - 40rpx);
  padding-bottom: 166rpx;
  background-color: #f9fcfc;
  .address-box {
    background-color: #fff;
    border-radius: 20rpx;
    .address-item {
      padding: 20rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .info {
        flex: 1;
        display: flex;
        min-height: 120rpx;
        flex-direction: column;
        margin-left: 20rpx;
        justify-content: space-between;
        .info-row {
          color: #222222;
          font-size: 28rpx;
          line-height: 44rpx;
          > text:nth-child(1) {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 50rpx;
            margin-right: 12rpx;
          }
          .tag {
            display: inline-block;
            padding: 1rpx 20rpx;
            border-radius: 30rpx;
            font-size: 20rpx;
            color: #fff;
            background-color: #f56c6c;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    height: 126rpx;
    padding: 20rpx;
    z-index: 12;
    bottom: 0;
    left: 0;
    right: 0;
    .button {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 100rpx;
      &:active {
        background-color: #b9e4e1;
      }
    }
  }
}
</style>
